<template>
  <div>
    <pro-table :columns="columns" :request="getPageList">
      <template #operation>
        <n-button type="primary">operation插槽</n-button>
      </template>

      <template #tableTitle>
        <div>我是tableTitle插槽</div>
      </template>

      <template #tableTop>
        <n-alert type="info">我是tableTop插槽</n-alert>
      </template>

      <template #tableBottom>
        <n-alert type="info">我是tableBottom插槽</n-alert>
      </template>
    </pro-table>
  </div>
</template>

<script setup lang="ts">
  import { useSlotsProTable } from './useSlotsProTable'

  const { columns } = useSlotsProTable()

  const data = [
    {
      key1: '我是普通列',
      key2: '我能自定义列属性',
      key3: 'wwww.baidu.com',
      key4: 100,
      key5: 100,
      key6: true,
      key7: Date.now()
    },
    {
      key1: '我是普通列',
      key2: '我能自定义列属性',
      key3: 'wwww.vue.org',
      key4: 200,
      key5: 200,
      key6: false,
      key7: Date.now()
    }
  ]

  const getPageList = async ({}) => {
    try {
      return {
        data: data,
        total: 2
      }
    } catch (e) {
      console.log(e)
    }
  }
</script>

<style lang="less" scoped></style>
